### isAdd 表示创建单页
#set(isAdd = (singlePage == null))
<!-- 弹出层主体内容 -->
<div class="open-box" style="padding:5px 5px 0 5px">
	<form id="open-form" action="/admin/page/#(isAdd ? 'save' : 'update')" method="POST" onsubmit="return false;">
	<div class="singlePage-main d-flex">
			<div class="panel-header">#(isAdd ? '创建单页' : '修改单页')</div>
			<div class="panel-body">
				#if( ! isAdd )
						<input type="hidden" name="singlePage.id" value="#(singlePage.id)">
					#end
					
					<div class="form-group" >
						<input autocomplete="off" name="singlePage.title" value="#(singlePage.title ??)" class="form-control form-control-lg" type="text" placeholder="单页标题">
					</div>
					<div class="form-group">
						<label for="singlePage.slug">简称</label>
						<input autocomplete="off" name="singlePage.slug" value="#(singlePage.slug ??)" class="form-control form-control-lg" type="text" placeholder="字母简称">
					</div>
					<div class="form-group">
					    <label for="singlePage.seoKeywords">关键字</label>
					    <input autocomplete="off" name="singlePage.seoKeywords" value="#(singlePage.seoKeywords ??)" class="form-control form-control-lg" type="text" placeholder="seo关键词(keywords)">
					</div>
					<div class="form-group">
						<label for="singlePage.seoDescription">描述</label>
						<input autocomplete="off" name="singlePage.seoDescription" value="#(singlePage.seoDescription ??)" class="form-control form-control-lg" type="text" placeholder="seo描述(description)">
					</div>
					<div class="form-group">
						### escape 指令用于解决 ckeditor 无法显示处于 pre 内的 html 源码的问题
						<textarea id="editor1" name="singlePage.content">#escape(singlePage.content ??)</textarea>
					</div>
				<!-- 弹出层 button -->
				<div class="layui-layer-btn" style="padding: 0 0 10px 0;">
					<a class="layui-layer-btn0">提交</a>
					<a class="layui-layer-btn1">取消</a>
				</div>		
			</div>
	</form>
</div>
<link rel="stylesheet" href="/assets/lib/jstree/themes/default/style.min.css" />
<script src="/assets/lib/jstree/jstree.min.js"></script>
<!-- 添加 ckeditor 组件依赖 -->
<script src="/assets/lib/ckeditor/ckeditor.js"></script>
<style>
#open-form{
	width:100%;
}
.singlePage-main {
	margin: 1px -7px;
	flex-wrap: wrap;
}
.singlePage-main .form-group{
   width:100%;
}
.panel {
	flex: 1 1 auto;
	margin: 10px 8px 0;
}
.panel-body {
	padding: 10px;
	/* width: 550px; */
	flex-direction: column;
	width: 100%;	/* echarts 支持使用百分比 */
	min-height: 500px;
}
.panel-item{
	width:100%;	
}
.panel-item-header{
    height: 40px;
    line-height: 40px;
	text-align:left;
	color: #333;
    font-size: 16px;
	border-bottom:1px solid #eee;
}
.panel-item-body {
	/* flex 元素多行时多行的对齐方式，默认值 stretch 占满整个交叉轴 */
	align-content: flex-start;
	flex-wrap: wrap;
	padding: 10px 0;
	min-height:80px;
	
}
.panel-item-body div.fa-box {
    flex: 0 0 auto;
    width: 100%;
    margin: 5px 10px 10px 0px;
    padding: 10px 0;
}
.small-image .panel-item-body .fa-box {
    flex: 0 0 100%;
    margin: 0 0 20px 0;
    height: 150px;
    background-color: #f8f9fa;
    border: #f0f0f0 1px solid;
    text-align: center;
}
.panel-item-body div.fa-box i {
	margin-top:25px;
	font-size: 40px;
	color: #555;
	margin-bottom: 0.8rem;
}
.panel-item-body div.fa-box i:hover {
		font-size: 36px;
		cursor: pointer;
}
.fa-box p {
	font-size: 15px;
}
.panel-item-info{
	text-align:left;
	color: #ddd;
    font-size: 14px;
    display:inline-block;
    padding:5px 0;
}
</style>
<script>
$(function() {
	
	// 防止 esc 键关闭弹出层。注意目前只支持 input 组件内的 esc 键
	$('.layui-layer-content').on('keydown', function(event) {
		if (event.keyCode === 27) {
			event.stopPropagation();	// 阻止将事件冒泡到上层组件
		}
	});
	
	// 初始化 ckeditor
	CKEDITOR.replace('editor1', {height: '450px'});
	
	// 设置第一个 input 为输入焦点
	$(".open-box input[type='text']:first").focus();
	
	// 绑定提交按钮事件
	$(".layui-layer-btn0").on("click", submitSinglePage);
	
	// 解决 ckeditor 工具栏点击时触发的弹出层被 layer 弹出层遮盖的问题
	var shadeDiv = $('div.layui-layer-shade');
	shadeDiv.attr('style', shadeDiv.attr('style') + ' z-index:1024;');
	var openDiv = $('div.layui-layer.layui-layer-page');
	openDiv.attr('style', openDiv.attr('style') + ' z-index:1025;');
	
	// 初始化分类树
	$('#categoryTree').jstree({
	  "core" : {
	      "themes" : {
	          "icons" : false
	      }
	  },	
	  "checkbox" : {
	    "keep_selected_style" : false
	  },
	  "plugins" : [ "wholerow", "checkbox" ]
	});	
});


function submitSinglePage() {
	// 使用 jquery form 插件，接管表单提交事件，并将表单提交自动转化成 ajax 提交
	$("#open-form").ajaxSubmit({
		dataType: 'json', type: 'POST',
		beforeSerialize: function($form, options) {
			// 将 ckeditor 中的数据同步到 textarea，否则数据无法提交到服务端
			for (instance in CKEDITOR.instances) {
				CKEDITOR.instances[instance].updateElement();
			}
			kit.loading({msg: '正在保存, 请稍候 .....'});
		},
		success: function(ret) {
			kit.closeLoading();		// 关闭 loading 层
			
			if (ret.state == "ok") {
				layer.closeAll();	// 提交成功关闭 open 弹出层
				kit.fill('/admin/page', null, '#content-box');
			}
			kit.msg(ret);
		}
	});
}
</script>



